---
import Markdown from '@astrojs/markdown-component';
import BaseLayout from 'layouts:BaseLayout.astro';
---

<BaseLayout title="Felte | Documentation" section="docs">
  <main tabindex="-1" id="main-content">
    <h1>Documentation</h1>

    <Markdown>
      Felte is a simple and extensible form library for
      [Solid](https://solidjs.com), [Svelte](https://svelte.dev) and
      [React](https://reactjs.org)/[Preact](https://preactjs.com). Its purpose
      is to let you handle form reactivity as easily as possible without having
      to use any components such as `Form` or `Field` to let you style your
      fields easily. Its extensibility also allows to build solutions for common
      issues such as error reporting or validation. Thanks a lot for considering
      Felte for your project! We hope it's an enjoyable experience!
    </Markdown>

    <div class="frameworks">
      <div class="framework-link">
        <a
          aria-label="Section: Getting started with Svelte"
          href="/docs/svelte/getting-started"
        >
          Get started with Svelte
          <svg
            role="img"
            aria-hidden="true"
            height="25"
            width="25"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
            ><path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M13 5l7 7-7 7M5 5l7 7-7 7"></path>
          </svg>
        </a>
      </div>
      <div class="framework-link">
        <a
          aria-label="Section: Getting started with Solid"
          href="/docs/solid/getting-started"
        >
          Get started with Solid
          <svg
            role="img"
            aria-hidden="true"
            height="25"
            width="25"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
            ><path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M13 5l7 7-7 7M5 5l7 7-7 7"></path>
          </svg>
        </a>
      </div>
      <div class="framework-link">
        <a
          aria-label="Section: Getting started with React"
          href="/docs/react/getting-started"
        >
          Get started with React/Preact
          <svg
            role="img"
            aria-hidden="true"
            height="25"
            width="25"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
            ><path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M13 5l7 7-7 7M5 5l7 7-7 7"></path>
          </svg>
        </a>
      </div>
      <div class="framework-link">
        <a
          aria-label="Section: Getting started with Vanilla JS (Custom element)"
          href="/docs/element/getting-started"
        >
          Get started with Vanilla JS (Custom element)
          <svg
            role="img"
            aria-hidden="true"
            height="25"
            width="25"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
            ><path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M13 5l7 7-7 7M5 5l7 7-7 7"></path>
          </svg>
        </a>
      </div>
    </div>
  </main>
</BaseLayout>

<style>
  h1 {
    font-size: 3rem;
    margin-left: 2rem;
  }

  .framework-link {
    position: relative;
  }

  .framework-link a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    color: var(--primary-font-color);
  }

  .framework-link a:hover {
    color: var(--primary-font-color);
    background: var(--header-background-hover);
  }

  svg {
    color: var(--primary-color);
    height: 2.5rem;
    width: 2.5rem;
  }

  a,
  a :global(code) {
    color: var(--link-color);
    transition: color 100ms;
  }

  a:hover,
  a :global(code):hover {
    color: var(--link-color-hover);
  }

  main {
    max-width: 700px;
    margin: 0 auto;
    margin-bottom: 6rem;
    width: 95%;
    margin-top: 2rem;
  }
</style>
